<template>
	<view class="page_view">
		<view class="zhanwei"></view>
		<view class="content1">
			<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<image class="avatar" :src="avatarUrl?avatarUrl:'https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/headerImg.png'"></image>
			</button>
			<view class="get_nickname2">
				<view class="nickname_left">昵称</view>
				<input type="nickname" class="ipt_box" v-model="nickname" placeholder="请点击或输入获取昵称" placeholder-class="ipt_holder" @blur="getNickname" />
			</view>
			<view class="get_nickname">
				<view class="nickname_left">手机号</view>
				<input type="nickname" disabled class="ipt_box2" v-model="phone" placeholder="请点击获取手机号" placeholder-class="ipt_holder" @blur="getNickname" v-if="phone" />
				<button class="getphone" open-type="getPhoneNumber" @getphonenumber="getphonenumber" v-else>获取您的手机号</button>
			</view>
		</view>
		<view class="login-btn" @click="getUserInfo()">保存</view>
	</view>
</template>

<script>
	import tim from '@/utils/tim.js'
import uploadImage from '@/common/ossutil/ossutil/uploadFile.js';
import { WxLogin, getphone } from '@/api/login.js';
export default {
	data() {
		return {
			nickname: '',
			avatarUrl: '',
			imgName:'',
			data: '',
			// code:null,
			phone: null,
			qianming: ''
		};
	},

	onLoad(options) {},
	methods: {
		// 获取用户手机号
		async getphonenumber(ev) {
			let t = this;
			console.log(ev);
			let params = {
				code: ev.detail.code
			}
			getphone(params).then((res) => {
				console.log(res);
				t.phone = res.data.phoneNumber;
			});
		},
		// 获取昵称
		getNickname(e) { 
			this.nickname = e.detail.value;
		},
		// 获取头像
		onChooseAvatar(e) {
			var that = this;
			uploadImage(e.detail.avatarUrl,'','wechat/', (res) => {
				that.avatarUrl = res.imgUrl;
				that.imgName = res.imgName;
			});
		},
		loginTM() {
			let userinfo = uni.getStorageSync('userinfo')
			if (!userinfo.id) return
			const userId = String(userinfo.id)
			let res = tim.genTestUserSig(userId)
			// let promise = this.$tim.login({
			// 	userID: userId,
			// 	userSig: res.userSig
			// });
			// promise.then((res) => {
			// 	console.log('登录成功')
			// 	//登录成功后 更新登录状态
			// 	// this.$store.commit("toggleIsLogin", true);
			// 	// //自己平台的用户基础信息
			// 	// uni.setStorageSync('userInfo', JSON.stringify(userInfo))
			// 	// //tim 返回的用户信息
			// 	// uni.setStorageSync('userTIMInfo', JSON.stringify(res.data))
			// 	// uni.reLaunch({
			// 	// 	url: '../tim/record'
			// 	// })
			// }).catch((err) => {
			// 	console.warn('login error:', err); // 登录失败的相关信息
			// });
			// console.log(this.$TUICallKit.init,'12');
			// res = tim.genTestUserSig(userId)
			this.$TUICallKit.init({
				sdkAppID: 1600011248,
				userID: userId,
				userSig: res.userSig,
			}).then(res=>{
				console.log(res,'success');
				// uni.showModal({
				// 	title:'success'
				// })
				
				this.$TUICallKit.setSelfInfo({ nickName: userinfo.name, avatar: this.ImgUrl+userinfo.avatar });
			}).catch(res=>{
				console.log(res,'fail');
				uni.showModal({
					title:'fail'
				})
			})
			
		},
		getUserInfo() {
			var that = this;
			if (!that.avatarUrl) {
				uni.showToast({
					title: '请上传头像',
					icon: 'none'
				});
				return false;
			}
			if (!that.nickname) {
				uni.showToast({
					title: '请填写昵称',
					icon: 'none'
				});
				return false;
			}
			if (!that.phone) {
				uni.showToast({
					title: '请同意获取您的手机号',
					icon: 'none'
				});
				return false;
			}
			uni.login({
				success(res) {
					let code = res.code;
					WxLogin({
						mobile:that.phone,
						avatar:that.imgName,
						name:that.nickname,
						code:code
					}).then(res=>{
						if(res.code == 200001){
							uni.setStorageSync('token',res.data.token)
							uni.setStorageSync('userinfo',res.data.user_info)
							that.loginTM();
							uni.switchTab({
								url:'/pages/index/index'
							})
						}
						console.log(res)
					})
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
.page_view {
	width: 100%;
	min-height: 100vh;
	background: #e6e6e6;
	padding: 0 22rpx;
	box-sizing: border-box;
}
.zhanwei {
	height: 126rpx;
}
.title {
	font-family: Alibaba PuHuiTi 2;
	text-align: center;
	margin-top: 40rpx;
}
.notice {
	text-align: center;
	color: #ccc;
	font-size: 20rpx;
	margin-top: 20rpx;
}

.login-btn {
	width: 100%;
	height: 87rpx;
	margin-top: 60rpx;
	border-radius: 50rpx;
	background: #0165fb;
	text-align: center;
	line-height: 87rpx;
	font-family: 'Alibaba PuHuiTi 2.0';
	font-style: normal;
	font-weight: bold;
	font-size: 28rpx;
	color: #ffffff;
	margin: 0 auto;
	margin-top: 40rpx;
}
.get_nickname1 {
	width: 632rpx;
	height: 88rpx;
	background: #f4f4f4;
	border-radius: 50rpx;
	padding: 0;
	margin: 0;
	border: 0;
}

.get_nickname2 {
	width: 100%;
	height: 122rpx;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #f7f7f7;
	margin-top: -90rpx;
	input::placeholder {
		color: #bdbdbd;
	}
	.ipt_box {
		width: 80%;
		font-size: 30rpx;
		color: #8e8785;
	}
	.ipt_box2 {
		width: 50%;
		font-size: 30rpx;
		color: #8e8785;
	}
}
.get_nickname:last-child {
	border: 0;
}
.get_nickname {
	width: 100%;
	height: 122rpx;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #f7f7f7;
	input::placeholder {
		color: #bdbdbd;
	}
	.ipt_box {
		width: 80%;
		font-size: 30rpx;
		color: #8e8785;
	}
	.ipt_box2 {
		width: 80%;
		font-size: 30rpx;
		color: #8e8785;
	}
	.getphone {
		width: 80%;
		font-family: 'Alibaba PuHuiTi 2.0';
		font-size: 30rpx;
		color: #8e8785;
		border: 0 !important;
		background: transparent !important;
		padding: 0 !important;
		margin: 0 !important;
		text-align: left;
	}
	.getphone::after {
		border: none;
	}
}
.avatar-wrapper {
	padding: 0;
	width: 170rpx !important;
	height: 170rpx !important;
	position: relative;
	top: -80rpx;
	margin-bottom: 40px;
	border-radius: 50%;
	border: 10rpx solid #fff;
}

.avatar {
	display: block;
	width: 160rpx;
	height: 160rpx;
	border-radius: 50%;
}
// .avatar::before {
//   content: "";
//   width: 24rpx;
//   height: 24rpx;
//   background-image: url("");
//   background-size: 100% 100%;
//   position: absolute;
//   right: 0;
//   bottom: 0;
// }

.container {
	display: flex;
}

.nickname {
	justify-content: space-around;
	border: solid 1rpx #cdcdcd;
	height: 100rpx;
	line-height: 100rpx;
	align-items: center;
}
.btn {
	width: 100%;
	height: 88rpx;
}
.content1 {
	border-radius: 16rpx;
	background: #fff;
	padding: 30rpx;
	box-sizing: border-box;
}
.get_nickname3 {
	display: flex;
	justify-content: space-between;
	margin-top: 40rpx;
}
.textarea {
	width: 80%;
	height: 300rpx;
}
</style>
